<template>
  <div>
    <div ref="oneChartRef" style="width: 100vw; height: 300px"></div>
  </div>
</template>

<script lang="ts" setup>
import {
  ref,
  reactive,
  markRaw,
  nextTick,
  onMounted,
  onBeforeUnmount,
} from "vue";
import * as echarts from "echarts";

let oneChartRef = ref();

const state = reactive({
  chartsData: {
    oneChart: null as any,
    dispose: [null, "", undefined],
  },
  myCharts: [] as any,
});

const initLeftDayBarChart = () => {
  if (
    !state.chartsData.dispose.some((b: any) => b === state.chartsData.oneChart)
  )
    state.chartsData.oneChart.dispose();
  state.chartsData.oneChart = markRaw(echarts.init(oneChartRef.value));

  let angle = 0; //角度，用来做简单的动画效果的
  let value = 95.33;
  const option = {
    backgroundColor: "#061740",
    title: {
      text: "{a|" + value + "}{c|%}",
      x: "center",
      y: "center",
      textStyle: {
        rich: {
          a: {
            fontSize: fontSize(24),
            color: "#29EEF3",
          },

          c: {
            fontSize: 20,
            color: "#ffffff",
            // padding: [5,0]
          },
        },
      },
    },
    legend: {
      type: "plain",
      orient: "vertical",
      right: 0,
      top: "10%",
      align: "auto",
      data: [
        {
          name: "涨价后没吃过",
          icon: "circle",
        },
        {
          name: "天天吃",
          icon: "circle",
        },
        {
          name: "三五天吃一次",
          icon: "circle",
        },
        {
          name: "半个月吃一次",
          icon: "circle",
        },
      ],
      textStyle: {
        color: "white",
        fontSize: 16,
        padding: [10, 1, 10, 0],
      },
      selectedMode: false,
    },
    series: [
      {
        name: "ring5",
        type: "custom",
        coordinateSystem: "none",
        renderItem: function (params, api) {
          return {
            type: "arc",
            shape: {
              cx: api.getWidth() / 2,
              cy: api.getHeight() / 2,
              r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.6,
              startAngle: ((0 + angle) * Math.PI) / 180,
              endAngle: ((90 + angle) * Math.PI) / 180,
            },
            style: {
              stroke: "#0CD3DB",
              fill: "transparent",
              lineWidth: 1.5,
            },
            silent: true,
          };
        },
        data: [0],
      },
      {
        name: "ring5",
        type: "custom",
        coordinateSystem: "none",
        renderItem: function (params, api) {
          return {
            type: "arc",
            shape: {
              cx: api.getWidth() / 2,
              cy: api.getHeight() / 2,
              r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.6,
              startAngle: ((180 + angle) * Math.PI) / 180,
              endAngle: ((270 + angle) * Math.PI) / 180,
            },
            style: {
              stroke: "#0CD3DB",
              fill: "transparent",
              lineWidth: 1.5,
            },
            silent: true,
          };
        },
        data: [0],
      },
      {
        name: "ring5",
        type: "custom",
        coordinateSystem: "none",
        renderItem: function (params, api) {
          return {
            type: "arc",
            shape: {
              cx: api.getWidth() / 2,
              cy: api.getHeight() / 2,
              r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.65,
              startAngle: ((270 + -angle) * Math.PI) / 180,
              endAngle: ((40 + -angle) * Math.PI) / 180,
            },
            style: {
              stroke: "#0CD3DB",
              fill: "transparent",
              lineWidth: 1.5,
            },
            silent: true,
          };
        },
        data: [0],
      },
      {
        name: "ring5",
        type: "custom",
        coordinateSystem: "none",
        renderItem: function (params, api) {
          return {
            type: "arc",
            shape: {
              cx: api.getWidth() / 2,
              cy: api.getHeight() / 2,
              r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.65,
              startAngle: ((90 + -angle) * Math.PI) / 180,
              endAngle: ((220 + -angle) * Math.PI) / 180,
            },
            style: {
              stroke: "#0CD3DB",
              fill: "transparent",
              lineWidth: 1.5,
            },
            silent: true,
          };
        },
        data: [0],
      },
      {
        name: "ring5",
        type: "custom",
        coordinateSystem: "none",
        renderItem: function (params, api) {
          let x0 = api.getWidth() / 2;
          let y0 = api.getHeight() / 2;
          let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.65;
          let point = getCirlPoint(x0, y0, r, 90 + -angle);
          return {
            type: "circle",
            shape: {
              cx: point.x,
              cy: point.y,
              r: 4,
            },
            style: {
              stroke: "#0CD3DB", //粉
              fill: "#0CD3DB",
            },
            silent: true,
          };
        },
        data: [0],
      },
      {
        name: "ring5", //绿点
        type: "custom",
        coordinateSystem: "none",
        renderItem: function (params, api) {
          let x0 = api.getWidth() / 2;
          let y0 = api.getHeight() / 2;
          let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.65;
          let point = getCirlPoint(x0, y0, r, 270 + -angle);
          return {
            type: "circle",
            shape: {
              cx: point.x,
              cy: point.y,
              r: 4,
            },
            style: {
              stroke: "#0CD3DB", //绿
              fill: "#0CD3DB",
            },
            silent: true,
          };
        },
        data: [0],
      },
      {
        name: "吃猪肉频率",
        type: "pie",
        radius: ["58%", "45%"],
        silent: true,
        clockwise: true,
        startAngle: 90,
        z: 0,
        zlevel: 0,
        label: {
          normal: {
            position: "center",
          },
        },
        data: [
          {
            value: value,
            name: "",
            itemStyle: {
              normal: {
                color: {
                  // 完成的圆环的颜色
                  colorStops: [
                    {
                      offset: 0,
                      color: "#4FADFD", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#28E8FA", // 100% 处的颜色
                    },
                  ],
                },
              },
            },
          },
          {
            value: 100 - value,
            name: "",
            label: {
              normal: {
                show: false,
              },
            },
            itemStyle: {
              normal: {
                color: "#173164",
              },
            },
          },
        ],
      },

      {
        name: "",
        type: "gauge",
        radius: "58%",
        center: ["50%", "50%"],
        startAngle: 0,
        endAngle: 359.9,
        splitNumber: 8,
        hoverAnimation: true,
        axisTick: {
          show: false,
        },
        splitLine: {
          length: 60,
          lineStyle: {
            width: 5,
            color: "#061740",
          },
        },
        axisLabel: {
          show: false,
        },
        pointer: {
          show: false,
        },
        axisLine: {
          lineStyle: {
            opacity: 0,
          },
        },
        detail: {
          show: false,
        },
        data: [
          {
            value: 0,
            name: "",
          },
        ],
      },
    ],
  };

  //获取圆上面某点的坐标(x0,y0表示坐标，r半径，angle角度)
  function getCirlPoint(x0, y0, r, angle) {
    let x1 = x0 + r * Math.cos((angle * Math.PI) / 180);
    let y1 = y0 + r * Math.sin((angle * Math.PI) / 180);
    return {
      x: x1,
      y: y1,
    };
  }

  function draw() {
    angle = angle + 3;
    state.chartsData.oneChart.setOption(option, true);
    //window.requestAnimationFrame(draw);
  }

  setInterval(function () {
    //用setInterval做动画感觉有问题
    draw();
  }, 100);

  state.chartsData.oneChart.setOption(option);
  state.myCharts.push(state.chartsData.oneChart);
};

// 批量设置 echarts resize
const initEchartsResizeFun = () => {
  nextTick(() => {
    for (let i = 0; i < state.myCharts.length; i++) {
      setTimeout(() => {
        state.myCharts[i].resize();
      }, i * 1000);
    }
  });
};
// 批量设置 echarts resize
const initEchartsResize = () => {
  window.addEventListener("resize", initEchartsResizeFun);
};
// 页面加载时
onMounted(() => {
  initEchartsResize();
  initLeftDayBarChart();
});

onBeforeUnmount(() => {
  // 离开页面必须进行移除，否则会造成内存泄漏，导致卡顿
  window.removeEventListener("resize", initEchartsResizeFun);
});

const fontSize = (res) => {
  const clientWidth =
    window.innerWidth ||
    document.documentElement.clientWidth ||
    document.body.clientWidth;
  if (!clientWidth) return;
  let fontSize = clientWidth / 1920;
  console.log(res * fontSize, "11");

  return res * fontSize;
};
</script>
<style scoped lang="less">
// 二、字体自适应
// 补充一下，字体的自适应：

// font-size: calc(100vw * 14/ 1920);

// 14就是你想要的字号，改14即可了哈
</style>
